<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .my-link{
            color: #ccc;
        }
        .router-link-active{
            color: #000;
        }
    
    </style>
</head>
<body>
    <div id="app">
        <input type="button" @click='fn_forward' value="前进">
        <input type="button" @click='fn_back' value="后退">
        <input type="button" @click='fn_push' value="用户">
        <router-link class="my-link" to="/user">用户</router-link>
        <router-link class="my-link" to="/article">文章</router-link>
        <router-link class="my-link" to="/comment">留言</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    // 1.声明路由
    let r1 = new VueRouter({
        routes:[
            {path:'/user',component:{template:'<div>用户列表</div>'}},
            {path:'/article',component:{template:'<div>文章列表</div>'}},
            {path:'/comment',component:{template:'<div>留言列表</div>'}}
        ]
    });
    // 2.调用路由

    let vm = new Vue({
        el:'#app',
        methods:{
            fn_forward(){
                // js  window.history.go   路由跳转
                this.$touter.go(1);
            },
            fn_back(){
                this.$router.go(-1);
            },
            fn_push(){
                // 等价于 <router-link to></router-link>
                this.$router.push('/user');
            }         
        },
        router:r1
    })



</script>   
</html>